<template>
  <div class="witness-page">
    <breadcrumb
      :bread-path-list="breadPathList"
      last-bread-title="轨迹详情"
      :show-back-btn-flag="true"
    >
    </breadcrumb>
    <div class="witness-body">
      <div class="layout-header content-header">
        <p >当前项目:{{ query.projectName }}</p>
      </div>
      <div class="layout-body">
        <div class="ui-title">
        基本信息
        </div>
        <el-descriptions size="mini"  labelClassName="desLabel"  :column="4" border>
          <el-descriptions-item label="项目名称">{{ query.projectName }}</el-descriptions-item>
          <el-descriptions-item label="项目编号">{{ query.projectCode }}</el-descriptions-item>
          <el-descriptions-item label="项目标段">{{ query.bidName  }}</el-descriptions-item>
          <el-descriptions-item label="预警次数">{{ query.zjCount }}</el-descriptions-item>
        </el-descriptions>
      
        <div class="ui-title">
        预警信息
         <div class="layout_content">
            <div class="layout_content_left">
              <el-scrollbar style="height: 100%;">
                <template v-for="(item,index) in list_people" >
                  <ul v-if="item.children.length > 0" :key="index" >
                  <li><span class="layout_content_left_span" :style="{backgroundColor:item.color}"></span>{{ item.label }}</li>
                  <li  v-for="(ite,inde) in item.children" :key="inde">
                    <div class="imgbox" :style="{border: `1px solid ${ ite.color}`}">
                      <img v-if="ite.facePic" :src="ite.facePic" alt="" />
                      <img v-else :src="require('@/views/witness/components/Object3D/canvas/默认头像.png')" alt="" />
                      <div> <p >{{ ite.personName }} </p></div>
                      <el-checkbox  @change="handleSelectItem()" style="position: absolute;right: 1px;bottom: -8px;" v-model="ite.checked"></el-checkbox>
                    </div>
                  </li>
                </ul>
                </template>
              </el-scrollbar>
            </div>
            <div class="layout_content_right">
              <el-scrollbar >
                      <el-steps  :active="active" class="my-steps">
                        <template  v-for="(item,index) in list_step" >
                          <el-step :key="index"   :icon="item.type === 1 ? 'iconfont icon-bluedian' :  'iconfont icon-jingbaodeng'" :title="item.title" >
                            <!-- <i  class="icon-yujing" slot=icon ></i> -->
                            <template #title>
                                <p @click="fnGetAllAlarmId(item)">{{ item.title }}</p>
                            </template>
                            <template #description>
                              <p v-if="item.title!=='查看'">{{item.time }}</p>
                              <div v-if=" item.show" class="box_description">
                                <div class="close"> <i @click="item.show = false" class="el-icon-close"></i></div>
                                <p>识别到：{{ item.content.alarmTime }}</p>
                                <p>行为：{{ item.content.alarmContent }}</p>
                              </div>
                            </template>
                          </el-step>
                        </template>
                    </el-steps>
                 </el-scrollbar>
                <div class="box_3d">
                  <div class="name_box">轨迹定位图</div>
                  <proViewComponent ref="proView" progress lerg :onGetWanger="onGetWanger" />
                </div>
            </div>
         </div>
        </div>
  
      </div>
    </div>
  </div>
</template>
<script>
import proViewComponent from "@/views/witness/components/Object3D/proViewComponent.vue";
import { trackListPerson,trackListTrack,trackGetAlarm } from "@/api/pageStats"
// import ListCard from "./components/listCard.vue";
// import DialogDetail from "./components/dialog_detail.vue";
export default {
  components: {
    // ListCard,
    // DialogDetail,
    proViewComponent
  },
  data() {
    return {
      dialogDetail: false,
      active:3,
      typeRYLB:{
          'ZJ': "评标专家",
          'JD': "甲方代表",
          'ZBDL': "招标代理",
        },
      query:{},
      breadPathList:[
        {
          title:'统计查询',
          path:'/wintessquery/viewXm'
        },
      ],
      value: "", 
      options: [
        {
          label: "项目1",
          value: "1"
        },
        {
          label: "项目2",
          value: "2"
        }
      ],
      list_step:[],
      list_people:[],
      cardlist: [
        {
          name: "张三",
          id:1,
          value: "预警1",
          points:{ x: 400, y: 188, z: 3 }
        },
        {
          name: "李四",
          value: "预警2",
          id:'2',
          points: { x: 300, y: 188, z: 3 },
        }
      ],
      curItem: {},
      imgActive: [require("@/assets/imgs/dp/active.png"), require("@/assets/imgs/dp/noactive.png")]
    };
  },
  created(){
    this.query = this.$route.query;
    this.getTrackListPerson()

    
  },
  mounted() {
    // this.getAxiosDataYJpoint();
    // this.getAxiosDataRYpoint();
  },
  methods: {
        // 生成步骤条 - 单人 - 多人
    fnChangeSteps(alarmIdList=[],cardBindTime='',cardUnBindTime=''){
      // 假数据
        let { pbEndTime, pbStartTime } = this.query 
        const list_step = []
        const times = [ cardBindTime,  pbStartTime, pbEndTime, cardUnBindTime]
        const texts = ['进入评标区','开始评标','结束评标','离开评标区']
        const convertToTimestamp= ( date)=>{
          return  new Date(date).getTime()
        }
      // 2预警 1普通
      times.forEach((e,i) => {
        if(!e) return 
        let obj = {
          type:1,
          title:texts[i],
          time:times[i],
          show:false
        }
        list_step.push(obj)
      });
      const arr1 = []
      const arr2 = []
      const arr3 = []
    
      alarmIdList.forEach(x=>{
        const { timestamp,dateTime,alarmId } = x
        let obj = {
            type:2,
            title:'查看',
            time:dateTime,
            alarmId,
            show:false,
            content:null
          }
        if(timestamp > convertToTimestamp(cardBindTime) && timestamp < convertToTimestamp(pbStartTime)){
          arr1.push(obj)
        }else if(timestamp > convertToTimestamp(pbStartTime) && timestamp < convertToTimestamp(pbEndTime)){
          arr2.push(obj)
        }else if(timestamp > convertToTimestamp(pbEndTime) && timestamp < convertToTimestamp(cardUnBindTime)){
          arr3.push(obj)
        }
      })
      if(alarmIdList.length === 0){
        this.list_step = [list_step[0],list_step[1]]
        this.progress = false
        return 
      }
      if(list_step.length === 2){
        this.list_step  = [list_step[0],...arr2,list_step[1]]
      }else{
        this.list_step  = [list_step[0],...arr1,list_step[1],...arr2,list_step[2],...arr3,list_step[3]]
      }
      this.active = this.list_step.length
    },
    // 选中某mourn
    handleSelectItem(){
      const convertToTimestamp= ( date)=>{
        return  new Date(date).getTime()
      }


      const list = []
       for(const [k,v] of Object.entries(this.list_people)){
        if(v.children.length <=0){
          break;
        }
        for(const [k2,v2] of Object.entries(v.children)){
          if(v2.checked){
            list.push(v2)
          }
        }
       }
      //  模拟数据 
      const alarmIdList = [
        {
          "floorName": "十二楼",
          "pos": [54.892, 19.558, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-07 22:59:19",
          "timestamp": convertToTimestamp('2024-12-07 22:59:19'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe26f980062"
        },
        {
          "floorName": "十二楼",
          "pos": [54.892, 19.558, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-07 23:48:18",
          "timestamp": convertToTimestamp('2024-12-07 23:48:18'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe29e5e0075"
        },
        {
          "floorName": "十二楼",
          "pos": [58.033268, 22.66371, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-08 03:48:18",
          "timestamp": convertToTimestamp('2024-12-08 03:48:18'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe285bd0071"
        },
        {
          "floorName": "十二楼",
          "pos": [36.3559, 4.06252, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-08 22:48:56",
          "timestamp": convertToTimestamp('2024-12-08 22:48:56'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe31b270118"
        },
        {
          "floorName": "十二楼",
          "pos": [28.442162, 4.115754, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-08 23:49:07",
          "timestamp": convertToTimestamp('2024-12-08 23:49:07'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe344320145"
        },
        {
          "floorName": "十二楼",
          "pos": [28.430296, 13.751032, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-09 23:49:11",
          "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe353cb014e"
        },
        {
          "floorName": "十二楼",
          "pos": [20.273283, 4.067175, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-09 23:49:18",
          "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe372ca0177"
        },
      ]
      // 模拟数据
      this.query.pbEndTime = '2024-12-09 02:59:19'
      this.query.pbStartTime = '2024-12-08 00:59:19'
      if(list.length === 1){
        let {cardBindTime,cardUnBindTime,trackList} =  list[0]
        const alarmIdList = trackList.filter(x=>x.type === 1)
        // 模拟数据
         cardBindTime = '2024-12-07 21:59:19'
         cardUnBindTime = '2024-12-10 21:59:19'
        // 单人步骤条    
        this.fnChangeSteps(alarmIdList,cardBindTime,cardUnBindTime)
          // this.fnChangeSteps(alarmIdList,,cardUnBindTime)
       }
       if(list.length === 0){
         this.list_step = []
         this.progress = false
       }
       if(list.length > 1){
        list.forEach(i=>{
          if(i.trackList.length <=0)return 
          i.trackList.forEach(x=>{
            if(x.type === 1){
              x = {...x,'personId':i.personId}  // 示例把personId添加到alarmIdList
              alarmIdList.push(x)
            }
          })
        })
    
        // 多人步骤条
        this.fnChangeSteps(alarmIdList)
       }
       //生成轨迹数据
       const colors  = list.map(x=> x.color)
       this.$refs['proView'].handleLineAll(list,colors)
       
       
       
      
       
      
      
      
    },
    // 获取步骤条轨迹
    async getTrackListTrack(personIds){
      const { personId,projectId,bidId } = this.query 
          const params = {
            projectId,
            bidId,
            personIds,
          }
        return await trackListTrack(params)
    
    },
     // 获取人员列表
    async getTrackListPerson(){
      const peopleList = {
        'ZJ':{
          color:'#68F60C',
          name:'评标专家组',
          label:'评标专家',
          children:[]
        },
        'ZBDL':{
          color:'#FFC30A',
          name:'招标代理组',
          label:'招标代理',
          children:[]
        },
        'JD':{
          color:'#EB31D9',
          name:'甲方代表组',
          label:'甲方代表',
          children:[]
        }
      }
      const stringToColor = (str) => {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
          hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        const color = `#${((hash >> 0) & 0xFFFFFF).toString(16).padStart(6, '0')}`;
        return color;
      }
      const p = {
        projectId:this.query.projectId,
        bidId:this.query.bidId,
      }
      const r = await trackListPerson(p)
      if(r.code !== 0 ||  r.data.length <=0) return 
      const personIds = r.data.map(x=>x.personId)
      const guiji = await this.getTrackListTrack(personIds)
      if(guiji.code  !== 0 ) return 
      r.data.forEach((i)=>{
        if(peopleList[i.personType]){
          i.checked = false
          i.color = stringToColor(i.personName)
          peopleList[i.personType].children.push(i)
        }
        const data = guiji.data.find(x=> x.personId === i.personId) 
        if(data){
          i.trackList = data.trackList
        }
        personIds.push(i.personId)
      })
      this.list_people = peopleList
     },


    async fnGetAllAlarmId(item){
      const r = await trackGetAlarm(item.alarmId)
      if (r.code === 0 ){
          this.$set(item,'content',r.data)
        }
        item.show = true
    },
    handleClickIcon(val){
      console.log(val);
      
    },
    onGetWanger(msg){
       this.dialogDetail  = true
      
    },
    handleGotoRight(){
      this.$refs['listCard'].scrollBy(250)
    },
    // 设置人员
    getAxiosDataRYpoint() {
    // 评标专家 
    // 招标代理
    // 甲方代表 
      const peopleList = [
        {
          type:'PBZJ',
          color:'#68F60C',
          points:[
            { x: 360, y: 220, z: 3 },
            { x: 370, y: 220, z: 3 }
          ]
          
        },
        {
          type:'ZBDL',
          color:'#FFC30A',
          points:[
            { x: 340, y: 220, z: 3 },
            { x: 350, y: 220, z: 3 }
          ]
        },
        {
          type:'JFDB',
          color:'#EB31D9',
          points:[
            { x: 380, y: 220, z: 3 },
            { x: 390, y: 220, z: 3 }
          ]
        }
      ]
      // this.$refs["treeJScans"].setPeopleRadiusPoints(peopleList);
    },
    //   获取设置预警点位
    getAxiosDataYJpoint() {
      const points = this.cardlist;
      // this.$refs["treeJScans"].setWangerRadiusPoints(points);
    },
    handleDetailClick() {
      this.dialogDetail = true;
    },
    handleSelect(val) {
      this.curItem = val;
    },
    handleChange() {},
    handleRouteFn(){
      this.$router.push({path:'/wintessquery/nowTrajectory'})
    }
  }
};
</script>
<style scoped lang="scss">
$backBG: #2b333f;
$backCard: #193860;
.witness-page {

  // border: 1px solid red;
}
.witness-body {
  height: calc(100vh - 120px);
  background-color: #E5E5E5;
}
.layout-header.content-header {
  background-color: #fff;
  border: 1px solid #D2D2D2;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-left: none;
  border-right: none;
}
.layout-body{
  display: flex;
  margin:10px;
  padding: 10px;
  flex-direction: column;
  background: #fff;
  flex: 1;
  display: flex;
  overflow: hidden;
  .layout_content{
    display: flex;
    flex-direction: row;
    border: 1px solid #C8C8C8 ;
   .layout_content_left{
      height: calc(100vh - 300px);
      background-color: #E5E5E5;
      // font-size: 11px;
      flex: 1;
      padding: 10px;
      box-sizing: border-box;
      .layout_content_left_span{
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 4px;
        background-color: #1890FF;
      }
      .imgbox{
        width: 82px;
        height: 97px;
        box-sizing: border-box;
        position: relative;
        margin-bottom:10px ;
        img{
          width: 100%;
          height: 100%;
        }
        div{
          position: absolute;
          bottom: 0px;
          color: #fff;
          width: 80px;
          height: 20px;
          background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.77) 100%);
          border-radius: 0px 0px 2px 2px;
          p{
            line-height: 20px;
            text-align: center;
          }
        }

      }
    }
    .layout_content_right{
      display: flex;
      flex: 19;
      flex-flow: column nowrap;
      width: 0;
      ::v-deep .my-steps{
        padding-top: 52px;
        min-height: 90px;
        // transform: scale(0.8); 
        // margin-left: -220px;
        .el-step{
          width: 220px;
        }

      }
      .box_3d{
        position: relative;
        background-color: #EEF5FF;
        border-top:1px solid #C8C8C8;
        flex: 1;
        .name_box{
          width: 116px;
          height: 26px;
          text-align: center;
          line-height: 26px;
          color: #fff;
          background-color: #1890FF;
          border-bottom-right-radius: 10px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }
  ::v-deep .desLabel{
    width: 70px;
  }
}
.el-icon-sort {
  transform: rotateZ(90deg);
}
.box_description{
  position: absolute;
  top: -50px;
  background: #1890FF;
  border: 1px solid rgba(24,144,255,0.36);
  color: #fff;
  width: 100%;
  text-align: left;
  padding: 8px;
  height: 30px;
  border-radius: 4px;
  .close{
    position: absolute;
    top: 0;
    right: 4px;
  }
}

</style>

